<template>
  <div class="result">
    <div class="content">
      <div class="text">恭喜获得</div>
      <span class="amount">{{amount}}</span>
      <span class="unit">元</span>
    </div>
  </div>
</template>

<script setup>
defineProps({
  amount:{
    type:Number
  }
})
</script>

<script>
export default {
  name: "Result"
}

</script>


<style scoped>
  .result{
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: orange;
  }
  .result .content{
    width: 200px;
    height: 300px;
    background-image: url("@/assets/images/redpackage.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    text-align: center;

  }

  .result .content .text{
    margin-top: 60px;
    font-size: 36px;
    font-weight: bold;
  }
  .result .content .amount{
    color: orange;
    font-size: 30px;
    font-weight: bold;
  }

  .result .content .unit{
    font-size: 16px;
    margin-left: 5px;
  }
</style>